<template>
  <Popup v-model:show="showModal" :title="props.title" @submit="onSubmit">
    <view class="rili-list">
      <view class="mouth-title">
        <!-- <view @click.stop="mouthChange(-1)">减</view> -->
        <view>{{ nowDay.year === currentDay.year && nowDay.month === currentDay.month ? "本月" :
          `${currentDay.year}年${currentDay.month}月` }}</view>
        <!-- <view @click="mouthChange(1)">加</view> -->
      </view>
      <view class="mouth-week">
        <view class="week-item" v-for="(itm, idx) in weekList" :key="'week' + idx">
          <view class="item-box">{{ itm.title }}</view>
        </view>
        <view v-for="(itm, idx) in dayList" :key="'day' + idx" @click.stop="currentDay = itm"
          :class="`week-item ${(currentDay.year === itm.year && currentDay.month === itm.month && currentDay.date === itm.date) && 'item-active'} ${nowDay.month !== itm.month && 'color-gray'} ${(nowDay.year === itm.year && nowDay.month === itm.month && nowDay.date === itm.date) && 'color-green'}`">
          <view class="item-box">{{ itm.date }}</view>
        </view>
      </view>
    </view>
  </Popup>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import Popup from "@/components/ui/popup"
import { getMonthDetails, getNowDay, getNextDate } from "./data"
import { useShowModal } from "@/path/hooks/v-model"
const weekList = [
  { title: "日", week: 0 },
  { title: "一", week: 1 },
  { title: "二", week: 2 },
  { title: "三", week: 3 },
  { title: "四", week: 4 },
  { title: "五", week: 5 },
  { title: "六", week: 6 },
]
const nowDay = ref(getNowDay())
const currentDay = ref(getNowDay())
const dayList = ref([])
const props = defineProps({
  show: Boolean,
  title: String,
  /**年月日：2022-10-12 */
  current: String,
})
const emit = defineEmits(['update:show', 'update:current', "submit"])
const { showModal } = useShowModal(props, emit)
watch(() => props.current, v => {
  if ((typeof v === "string") && v) {
    const [year, month, date] = v.split("-")
    currentDay.value = { year: Number(year), month: Number(month), date: Number(date) };
  } else {
    currentDay.value = getNextDate(`${nowDay.value.year}-${nowDay.value.month}-${nowDay.value.date}`)
  }
}, { immediate: true });
onMounted(() => {
  const { year, month, date } = currentDay.value
  emit("update:current", `${year}-${month}-${date}`);
})
function onSubmit() {
  const { year, month, date } = currentDay.value
  emit("update:current", `${year}-${month}-${date}`);
  emit("submit", `${year}-${month}-${date}`);
}
function mouthChange(num) {
  if ((currentDay.value.month + num) < 1) {
    currentDay.value.month = 12
    currentDay.value.year = currentDay.value.year - 1
    return
  }
  if ((currentDay.value.month + num) > 12) {
    currentDay.value.month = 1
    currentDay.value.year = currentDay.value.year + 1
    return
  }
  currentDay.value.month = currentDay.value.month + num
}
watch(() => currentDay.value, ev => {
  const dayListInfo = getMonthDetails(`${ev.year}-${ev.month}`)
  const prevDays = dayListInfo.prevMonthDays.slice(dayListInfo.prevMonthDays.length - dayListInfo.currentMonthDays[0]?.week, dayListInfo.prevMonthDays.length)
  const nexDays = dayListInfo.nextMonthDays.slice(0, 6 - dayListInfo.currentMonthDays[dayListInfo.currentMonthDays.length - 1]?.week)
  dayList.value = [...prevDays, ...dayListInfo.currentMonthDays, ...nexDays]
}, {
  immediate: true,
  deep: true
})
</script>
<style scoped lang="less">
.rili-list {
  .mouth-title {
    font-weight: 700;
    font-size: 32rpx;
    color: #000000;
    padding: 0 36rpx;
    display: flex;
    align-items: center;
  }

  .mouth-week {
    padding-top: 32rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .week-item {
      width: 14.28%;
      padding: 9rpx 0;
      display: flex;
      justify-content: center;

      .item-box {
        text-align: center;
        font-weight: 400;
        font-size: 36rpx;
        color: #333333;
        width: 72rpx;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 28rpx;
      }

      &.color-gray {
        .item-box {
          color: #999999;
        }
      }

      &.color-green {
        .item-box {
          color: #9CDB14;
        }
      }

      &.item-active {
        .item-box {
          background: #9CDB14;
          color: #ffffff;
          font-weight: 700;
        }
      }
    }
  }
}
</style>